<template>
  <div>
    <Card dis-hover style="font-size: 12px;">
      <p slot="title" style="color: #515a6e;">
        <Icon type="md-list"></Icon>
        <span style="font-size: 12px;">订单信息</span>
      </p>
      <div slot="extra" class="cardExtra">
        <!-- <a href="#">
          <Tooltip content="客户迁移" placement="right">
            <Icon type="ios-contact-outline"></Icon>
          </Tooltip>
        </a>
        <a href="#">
          <Tooltip content="编辑订单" placement="right">
            <Icon type="ios-create-outline"></Icon>
          </Tooltip>
        </a>
        <a href="#">
          <Tooltip content="变更套系" placement="right">
            <Icon type="ios-color-filter-outline"></Icon>
          </Tooltip>
        </a>
        <a href="#">
          <Tooltip content="拆分订单" placement="right">
            <Icon type="ios-cut-outline"></Icon>
          </Tooltip>
        </a>
        <a href="#">
          <Tooltip content="新增景点/风格" placement="right">
            <Icon type="md-camera"></Icon>
          </Tooltip>
        </a>
        <a href="#">
          <Tooltip content="新增礼服" placement="right">
            <Icon type="md-bowtie"></Icon>
          </Tooltip>
        </a> -->
      </div>
      <Row class="orderDetailRow">
        <Col span="8">关联客资：</Col>
        <Col span="16">{{orderRowData.kz_id}}</Col>
      </Row>
      <Row class="orderDetailRow">
        <Col span="8">订单编号：</Col>
        <Col span="16"><span><a href="#">{{orderRowData.order_no}}</a></span></Col>
      </Row>
      <Row class="orderDetailRow">
        <Col span="8">订单类型：</Col>
        <Col span="16">
        <!-- <span>正常</span> -->
        <span>{{orderRowData.order_type}}</span>
        </Col>
      </Row>
      <Row class="orderDetailRow">
        <Col span="8">订单来源：</Col>
        <Col span="16">{{orderRowData.customer_source}}</Col>
      </Row>
      <Row class="orderDetailRow">
        <Col span="8">拍摄类型：</Col>
        <Col span="16">{{orderRowData.type_name}}</Col>
      </Row>
      <Row class="orderDetailRow">
        <Col span="8">接单信息：</Col>
        <Col span="16">{{orderRowData.store_name}}</Col>
      </Row>
      <Row class="orderDetailRow">
        <Col span="8">付款信息：</Col>
        <Col span="16">
        <span v-if="orderRowData.remaining_amount > 0" style="background-color: rgb(249, 72, 23); color: rgb(255, 255, 255);">
         欠款
         </span>
         <span v-else style="background-color: rgb(7, 194, 95); color: rgb(255, 255, 255);">
          已付全款
         </span>
        </Col>
      </Row>
      <Row class="orderDetailRow">
        <Col span="8">拍摄信息：</Col>
        <Col span="16">{{orderRowData.control_date}} </Col>
      </Row>
      <Row style="min-height: 28px; color: #777777;">
        <Col span="8">备注信息：</Col>
        <Col span="16">{{orderRowData.remarks}}</Col>
      </Row>
      <Divider class="myOrderDivider" orientation="left">客户信息</Divider>
      <Row class="orderDetailRow" v-if="orderRowData.bride_name">
        <Col span="5">女士：</Col>
        <Col span="16">{{orderRowData.bride_name}} <span class="gray-7">（{{orderRowData.bride_phone}}）</span></Col>
        <!-- <Col span="3">
          <Tooltip content="已绑定微信" placement="right">
            <Button style="color: #00c15c;" size="small" icon="ios-chatbubbles" type="default"></Button>
          </Tooltip>
        </Col> -->
      </Row>
      <Row class="orderDetailRow" v-if="orderRowData.groom_name">
        <Col span="5">男士：</Col>
        <Col span="16">{{orderRowData.groom_name}} <span class="gray-7">（{{orderRowData.groom_phone}}）</span></Col>
        <!-- <Col span="3">
          <Tooltip content="已绑定微信" placement="right">
            <Button style="color: #00c15c;" size="small" icon="ios-chatbubbles" type="default"></Button>
          </Tooltip>
        </Col> -->
      </Row>
      <!-- <Divider class="myOrderDivider" orientation="left">图片流转</Divider>
      <Row class="orderDetailRow">
        <Col span="8">图片流转：</Col>
        <Col span="16"><span>流转中</span></Col>
      </Row> -->
      <Divider class="myOrderDivider" orientation="left">款项详情</Divider>
      <Row class="orderDetailRow">
        <Col span="6"></Col>
        <Col span="6">总计</Col>
        <Col span="6">已付</Col>
        <Col span="6">欠款</Col>
      </Row>
      <Row class="orderDetailRow">
        <Col span="6">套系</Col>
        <Col span="6">{{orderRowData.price}}</Col>
        <Col span="6">{{orderRowData.amount_paid}}</Col>
        <Col span="6">{{orderRowData.remaining_amount}}</Col>
      </Row>
      <!-- <Row class="orderDetailRow">
        <Col span="6">二销</Col>
        <Col span="6">0.00</Col>
        <Col span="6">0.00</Col>
        <Col span="6">0</Col>
      </Row>
      <Row class="orderDetailRow">
        <Col span="6">零散</Col>
        <Col span="6">0</Col>
        <Col span="6">0</Col>
        <Col span="6">0.00</Col>
      </Row>
      <Row class="orderDetailRow">
        <Col span="6">其它</Col>
        <Col span="6">0</Col>
        <Col span="6">0</Col>
        <Col span="6">0.00</Col>
      </Row>
      <Row class="orderDetailRow">
        <Col span="6">总价</Col>
        <Col span="6">7380</Col>
        <Col span="6">0</Col>
        <Col span="6" style="color: #f94817;">7380</Col>
      </Row> -->
      <Divider class="myOrderDivider" orientation="left">业绩详情</Divider>
      <Row class="orderDetailRow">
        <Col span="7"></Col>
        <Col span="7">业绩人</Col>
        <Col span="5">业绩金额</Col>
        <!-- <Col span="5">实收业绩</Col> -->
      </Row>
      <Row class="orderDetailRow">
        <Col span="7">套系</Col>
        <Col span="7" style="line-height: 1.1;">{{orderRowData.store_employee}}</Col>
        <Col span="5">{{orderRowData.price}}</Col>
        <!-- <Col span="5">0</Col> -->
      </Row>
      <Divider class="myOrderDivider" orientation="left">排控信息</Divider>
      <Row class="orderDetailRow">
        <Col span="5">流程</Col>
        <Col span="8">时间</Col>
        <Col span="11">员工</Col>
      </Row>
      <Row class="orderDetailRow">
        <Col span="5">下单</Col>
        <Col span="8">{{orderRowData.creation_time}}</Col>
        <Col span="11">{{orderRowData.store_employee}}</Col>
      </Row>
      <!-- <Row class="orderDetailRow">
        <Col span="5">礼服</Col>
        <Col span="8">24-02-16 07:30</Col>
        <Col span="11"></Col>
      </Row> -->
      <Row class="orderDetailRow">
        <Col span="5">摄化</Col>
        <Col span="8">{{orderRowData.control_date}}</Col>
        <Col span="11">{{orderRowData.order_photographer}}/{{orderRowData.order_cosmetician}}</Col>
      </Row>
      <!-- <Row class="orderDetailRow">
        <Col span="5">选片</Col>
        <Col span="8">24-02-17 13:00</Col>
        <Col span="11"></Col>
      </Row> -->
      <!-- <Divider class="myOrderDivider" orientation="left">完成信息</Divider>
      <Row class="orderDetailRow">
        <Col span="10">流程</Col>
        <Col span="14">时间</Col>
      </Row> -->
    </Card>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        orderRowData: {}
      }
    },
    watch: {
      '$store.state.layout.app.orderRowData'(newValue, oldValue) {
        this.orderRowData = newValue
        for (let key in this.orderRowData) {
          if (this.orderRowData[key] == null || this.orderRowData[key] == "null") {
            this.orderRowData[key] = ""
          }
        }
        console.log('orderRowData', this.orderRowData);
      }
    },
    created() {
      this.orderRowData = this.$store.state.layout.app.orderRowData
      for (let key in this.orderRowData) {
        if (this.orderRowData[key] == null || this.orderRowData[key] == "null") {
          this.orderRowData[key] = ""
        }
      }
    },
  }
</script>

<style scoped>

</style>
